<template>
  <div>
    <div class="btn">
      <div class="zan" @click="clickZan">
        <van-icon :name="goodjob" size="1.3rem" />
        <p>{{cardata.like_count}}</p>
      </div>
      <div class="chat" @click="clickChat">
        <van-icon name="chat-o" size="1.3rem" />
        <p>{{commentFilter}}</p>
      </div>
      <div class="share" @click="clickShare">
        <i class="iconfont icon-icon-test14" style="font-size:1.3rem"></i>
        <p>分享</p>
      </div>
    </div>
    <van-action-sheet v-model="show" title="分享">
      <div class="content">
        <ul>
          <li>
            <svg
              t="1583391609940"
              class="icon"
              viewBox="0 0 1075 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6440"
              width="50"
              height="50"
            >
              <path
                d="M31.232 512a512.4096 512 0 1 0 1024.8192 0 512.4096 512 0 1 0-1024.8192 0Z"
                fill="#399EFD"
                p-id="6441"
              />
              <path
                d="M535.6544 646.4a23.0912 23.0912 0 0 0 16.2816-6.6048l139.8784-139.776a22.528 22.528 0 0 0-16.0256-38.6048 22.528 22.528 0 0 0-16.0768 6.6048l-101.376 101.2736V307.0976a22.6304 22.6304 0 0 0-22.6816-22.6304 22.6304 22.6304 0 0 0-22.6816 22.6304v262.144l-101.376-101.376a22.528 22.528 0 0 0-16.0256-6.5536 22.528 22.528 0 0 0-16.0768 38.6048l140.032 139.8784c4.4032 4.4544 10.24 6.7072 16.128 6.656z"
                fill="#FFFFFF"
                p-id="6442"
              />
              <path d="M401.3056 711.1168h284.672" fill="#FFFFFF" p-id="6443" />
            </svg>
            <p>下载</p>
          </li>
          <li>
            <a
              href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fwww.skypixel.com%2Fvideos%2F57de0d92-c6b3-45b5-97de-2115401e9ce6%3Futm_source%3Dweibo%26utm_medium%3DMobileWeb%26utm_campaign%3Dshare%26sp%3D0&type=3&pic=https%3A%2F%2Fcdn-hz.skypixel.com%2Fuploads%2Fcn_files%2Fvideo%2Fimage%2F5a650b3e-75de-4e20-b95b-dc55f49486d6.jpg%40!1200&title=%E6%88%91%E5%9C%A8%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E%E4%B8%8A%E5%8F%91%E7%8E%B0%E4%BA%86%E4%B8%80%E4%B8%AA%E8%B6%85%E8%B5%9E%E7%9A%84%E8%88%AA%E6%8B%8D%E4%BD%9C%E5%93%81%E3%80%8A%E4%B8%8A%E6%B5%B7%E4%B9%8B%E6%97%85%E3%80%8B%E3%80%82%E5%BF%AB%E6%9D%A5%E5%9B%B4%E8%A7%82%EF%BC%81&appkey=4116565080"
              target="_blank"
            >
              <svg
                t="1583391581375"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5030"
                width="50"
                height="50"
              >
                <path
                  d="M449.422222 481.659259c-96.711111 3.792593-174.459259 56.888889-174.459259 121.362963s77.748148 113.777778 174.459259 109.985185 174.459259-66.37037 174.459259-130.844444c-1.896296-64.474074-79.644444-104.296296-174.459259-100.503704z m64.474074 164.977778c-30.340741 39.822222-87.22963 56.888889-144.118518 26.548148-26.548148-15.17037-26.548148-43.614815-26.548148-43.614815s-11.377778-91.022222 85.333333-102.4c96.711111-13.274074 115.674074 79.644444 85.333333 119.466667z"
                  fill="#d81e06"
                  p-id="5031"
                />
                <path
                  d="M449.422222 584.059259c-5.688889 3.792593-7.585185 13.274074-3.792592 18.962963 1.896296 5.688889 11.377778 5.688889 17.066666 1.896297 5.688889-3.792593 7.585185-13.274074 3.792593-18.962963-1.896296-5.688889-9.481481-5.688889-17.066667-1.896297z m-45.511111 13.274074c-18.962963 1.896296-30.340741 17.066667-30.340741 34.133334 0 15.17037 15.17037 26.548148 32.237037 24.651852 17.066667-1.896296 32.237037-15.17037 32.237037-32.237038 0-17.066667-13.274074-28.444444-34.133333-26.548148z"
                  fill="#d81e06"
                  p-id="5032"
                />
                <path
                  d="M512 1.896296C231.348148 1.896296 3.792593 229.451852 3.792593 512s227.555556 510.103704 508.207407 510.103704 508.207407-227.555556 508.207407-510.103704S792.651852 1.896296 512 1.896296zM707.318519 625.777778c-39.822222 85.333333-170.666667 127.051852-265.481482 119.466666-91.022222-7.585185-210.488889-37.925926-221.866667-151.703703 0 0-5.688889-51.2 41.718519-117.570371 0 0 70.162963-98.607407 151.703704-128.948148 81.540741-28.444444 91.022222 18.962963 91.022222 47.407408-3.792593 24.651852-11.377778 37.925926 18.962963 28.444444 0 0 79.644444-37.925926 113.777778-3.792593 26.548148 26.548148 3.792593 64.474074 3.792592 64.474075s-11.377778 11.377778 11.377778 17.066666c22.755556 7.585185 94.814815 39.822222 54.992593 125.155556z m-79.644445-235.140741c-7.585185 0-15.17037-7.585185-15.17037-15.17037 0-9.481481 7.585185-15.17037 15.17037-15.170371 0 0 98.607407-18.962963 87.22963 89.125926v1.896297c0 7.585185-7.585185 13.274074-15.170371 13.274074-9.481481 0-15.17037-7.585185-15.17037-15.170371 0-3.792593 15.17037-73.955556-56.888889-58.785185zM796.444444 493.037037c-1.896296 18.962963-11.377778 11.377778-22.755555 11.377778-13.274074 0-22.755556-17.066667-22.755556-30.340741 0-11.377778 3.792593-22.755556 3.792593-22.755555 0-3.792593 11.377778-34.133333-7.585185-77.748149-36.02963-60.681481-106.192593-60.681481-113.777778-56.888889-7.585185 3.792593-20.859259 5.688889-20.859259 5.688889-13.274074 0-22.755556-9.481481-22.755556-22.755555 0-11.377778 7.585185-18.962963 17.066667-22.755556h1.896296c9.481481-1.896296 45.511111-3.792593 77.748148 3.792593 62.577778 17.066667 146.014815 85.333333 109.985185 212.385185z"
                  fill="#d81e06"
                  p-id="5033"
                />
              </svg>
              <p>微博</p>
            </a>
          </li>
          <li>
            <a
              href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fwww.skypixel.com%2Fvideos%2F57de0d92-c6b3-45b5-97de-2115401e9ce6%3Futm_source%3Dweibo%26utm_medium%3DMobileWeb%26utm_campaign%3Dshare%26sp%3D0&type=3&pic=https%3A%2F%2Fcdn-hz.skypixel.com%2Fuploads%2Fcn_files%2Fvideo%2Fimage%2F5a650b3e-75de-4e20-b95b-dc55f49486d6.jpg%40!1200&title=%E6%88%91%E5%9C%A8%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E%E4%B8%8A%E5%8F%91%E7%8E%B0%E4%BA%86%E4%B8%80%E4%B8%AA%E8%B6%85%E8%B5%9E%E7%9A%84%E8%88%AA%E6%8B%8D%E4%BD%9C%E5%93%81%E3%80%8A%E4%B8%8A%E6%B5%B7%E4%B9%8B%E6%97%85%E3%80%8B%E3%80%82%E5%BF%AB%E6%9D%A5%E5%9B%B4%E8%A7%82%EF%BC%81&appkey=4116565080"
              target="_blank"
            >
              <svg
                t="1583391653087"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7245"
                width="50"
                height="50"
              >
                <path
                  d="M512 0c282.763636 0 512 229.236364 512 512s-229.236364 512-512 512S0 794.763636 0 512 229.236364 0 512 0"
                  fill="#3C5A9A"
                  p-id="7246"
                />
                <path
                  d="M651.310545 215.133091h-94.952727c-56.32 0-118.923636 23.645091-118.923636 105.285818 0.279273 28.439273 0 55.668364 0 86.341818h-65.163637v103.656728h67.165091v298.449454h123.438546v-300.404364h81.454545l7.354182-101.98109h-90.949818s0.232727-45.381818 0-58.554182c0-32.256 33.559273-30.394182 35.607273-30.394182h55.016727v-102.4h-0.046546z"
                  fill="#FFFFFF"
                  p-id="7247"
                />
              </svg>
              <p>facebook</p>
            </a>
          </li>
          <li>
            <a
              href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.skypixel.com%2Fvideos%2Frussia-ting%3Futm_source%3Dtwitter%26utm_medium%3DMobileWeb%26utm_campaign%3Dshare%26sp%3D0&text=%E6%88%91%E5%9C%A8%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E%E4%B8%8A%E5%8F%91%E7%8E%B0%E4%BA%86%E4%B8%80%E4%B8%AA%E8%B6%85%E8%B5%9E%E7%9A%84%E8%88%AA%E6%8B%8D%E4%BD%9C%E5%93%81%E3%80%8ARussia%20%E4%BF%84%E7%BD%97%E6%96%AF-TING%E3%80%8B%E3%80%82%E5%BF%AB%E6%9D%A5%E5%9B%B4%E8%A7%82%EF%BC%81"
              target="_blank"
            >
              <svg
                t="1583391670166"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8040"
                width="50"
                height="50"
              >
                <path
                  d="M170.666382 213.332978h682.665529v639.998933H170.666382z"
                  fill="#FFFFFF"
                  p-id="8041"
                />
                <path
                  d="M512.895145 1023.998293c-207.402321 0.511999-394.367343-124.415793-473.72721-315.903473S3.285328 296.404839 149.75975 149.973083 516.948472-40.490599 708.009487 39.381268A512.21248 512.21248 0 0 1 1023.998293 512.980478C1023.998293 795.134675 795.604007 1023.486294 512.895145 1023.998293z m112.639812-738.857435l-15.871973 2.047997c-9.727984 2.047997-19.455968 5.119991-28.671952 8.703985a127.317121 127.317121 0 0 0-72.703879 86.527856c-5.119991 19.967967-5.119991 40.959932 0 60.415899-19.455968 0-38.911935-2.559996-57.343905-7.679987a376.746039 376.746039 0 0 1-156.714405-76.287873 236.159606 236.159606 0 0 1-37.930603-37.375937 104.490493 104.490493 0 0 1-11.775981-13.823977 143.231761 143.231761 0 0 0-13.823977 33.279944 133.375778 133.375778 0 0 0 28.671952 117.247805c6.655989 8.191986 16.895972 13.311978 23.551961 20.479966a33.83461 33.83461 0 0 1-17.407971-1.535998 126.037123 126.037123 0 0 1-27.135955-7.679987l-13.823977-5.119992a123.562461 123.562461 0 0 0 60.4159 110.591816c12.28798 9.215985 26.623956 14.847975 41.98393 16.895972-8.191986 7.167988-44.543926 4.095993-57.343905 2.559996 12.799979 38.911935 43.007928 69.119885 81.450531 82.431862 12.28798 4.607992 25.087958 6.655989 37.887937 6.655989a168.533052 168.533052 0 0 1-34.815942 22.527963 277.162205 277.162205 0 0 1-76.799872 28.159953c-11.77598 2.559996-24.06396 2.047997-37.375938 4.095993a183.039695 183.039695 0 0 1-40.959931-1.535998l11.263981 6.655989c11.77598 7.167988 23.551961 13.311978 36.351939 18.43197 24.575959 10.239983 49.663917 18.431969 75.263875 24.575959 60.415899 12.799979 123.434461 10.751982 182.826362-6.14399 134.186443-41.98393 219.178301-140.287766 251.476914-285.183525 5.119991-27.135955 7.167988-55.295908 6.14399-82.943862l20.479966-16.895971a214.826309 214.826309 0 0 0 43.519927-50.175917 255.572907 255.572907 0 0 1-72.703879 19.967967c5.119991-2.559996 9.727984-6.14399 14.335976-10.239983 19.455968-15.871974 33.791944-36.863939 41.471931-60.415899l-15.871973 8.703985a207.956987 207.956987 0 0 1-66.559889 22.015964 129.279785 129.279785 0 0 0-100.906499-40.447933v0.511999h-0.554666z"
                  fill="#2FB0EC"
                  p-id="8042"
                />
              </svg>
              <p>twitter</p>
            </a>
          </li>
        </ul>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from 'vue'
import { ActionSheet } from 'vant'
import { mapMutations, mapState } from 'vuex'

Vue.use(ActionSheet)
export default {
  data () {
    return {
      goodjob: 'good-job-o',
      show: false
    }
  },

  props: ['cardata', 'commentHeight'],
  methods: {
    ...mapMutations('video', ['setVideoId']),
    setId (data) {
      this.setVideoId(data)
      if (this.cardata.duration) {
        this.$router.push(`/video/${data}`)
      } else {
        this.$router.push(`/photos/${data}`)
      }
    },
    clickZan () {
      if (this.token) {
        if (this.goodjob === 'good-job-o') {
          this.goodjob = 'good-job'
          this.cardata.like_count++
        } else {
          this.goodjob = 'good-job-o'
          this.cardata.like_count--
        }
      } else {
        this.$router.push('/login')
      }
    },
    clickChat () {
      if (!location.hash.includes('video') && !location.hash.includes('photos')) {
        this.setId(this.cardata.slug)
      } else {
        document.documentElement.scrollTop = this.commentHeight
      }
    },
    clickShare () {
      this.show = true
    }
  },
  computed: {
    ...mapState('comment', ['comment']),
    ...mapState('login', ['token']),
    commentFilter () {
      const res = this.comment.filter(val => val.slug == this.cardata.slug)
      if (res.length) {
        return res[0].count - 0 + this.cardata.comment_count - 0
      } else {
        return this.cardata.comment_count
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  font-size: 1rem;
  color: #838385;
  .zan,
  .chat,
  .share {
    margin-right: 1rem;
    color: #838385;
    padding: 0.2rem 0;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      margin-right: 0.3rem;
    }
    p {
      font-size: 0.8rem;
    }
  }
  .share p {
    font-size: 0.7rem;
  }
}
.content {
  padding: 16px 16px 16px;
  ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      padding: 0 0 0.5rem 0;
      width: 33%;
      text-align: center;
      p {
        width: 100%;
        color: #838385;
        font-size: 0.6rem;
        font-weight: 400;
        margin-top: 0.4rem;
      }
    }
  }
}
</style>
